<template>
  <div class="top-content">
    <div class="system-name">预测软件平台</div>
    <div class="menu-list">
      <div
        v-for="item in menuList"
        :key="item.path"
        @click="changeRoute(item)"
        class="menu-item"
        :class="{ 'menu-active': item.path == $route.path }"
      >
        <div class="font">{{ item.name }}</div>
      </div>
    </div>
  </div>
  <!-- <navList></navList> -->
  <div class="router-view" style="color: #fff">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import navList from "@/components/navList.vue";

// Define reactive state
const activeRouter = ref("/");
const menuList = ref([
  {
    name: "历史数据统计显示",
    path: "/",
  },
  {
    name: "重过载统计显示",
    path: "/heavyOverload",
  },
  {
    name: "预警告警统计显示",
    path: "/warningAlert",
  },
]);

// Define methods
const updateMessage = () => {
  message.value = "You clicked the button!";
};

const router = useRouter(); 
const route = useRoute();
const changeRoute = (item) => {
  router.push({ path: item.path });
};

// Lifecycle hook
onMounted(() => {
  console.log("Component mounted");
});
</script>
<style lang="scss" scoped>
@import "@/global.scss";
.top-content {
  width: 100%;
  height: vh(100);
  background-color: #0f144c;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 vw(25);
  margin: auto;
}
.system-name {
  font-size: 26px;
  color: #fff;
  letter-spacing: 4px;
  line-height: vh(100);
  font-weight: 500;
  font-family: "Microsoft YaHei";
}
.menu-list {
  display: flex;
  align-items: flex-end;
  height: 100%;
  color: #fff;
  font-size: vw(20);
  padding-bottom: 8px;
  box-sizing: border-box;
}
.menu-item {
  font-size: vh(18);
  width: vw(250);
  height: vh(50);
  line-height: vh(50);
  text-align: center;
  -webkit-transform: skewX(-30deg);
  transform: skewX(-30deg);
  background-color: #0f1325;
  cursor: pointer;
  margin-left: 6px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出的部分 */
  text-overflow: ellipsis;

  .font {
    transform: skewX(30deg);
  }
}
.menu-active {
  background-color: #1a5cd7;
}
.router-view {
  width: 90%;
  margin: 0 auto;
  height: calc(100% - vh(100));
}
</style>
